<template>
    <div id="hospital">
        <!-- 背景图 -->
        <div class="bj">
            <div> 上海市</div>
            <div>医疗救治定点医院和发热门诊一览</div>
            <!-- <img src="@/assets/imgs/定点医院bj.png" alt=""> -->
        </div>

        <div style="margin-top:150px;">
            <!-- 搜索 -->
            <el-input
                style="width:18%;margin:1rem 1rem 0 0"
                size="small"
                placeholder="请输入关键字"
                v-model="params.name"
                clearable>
                <i
                    class="el-icon-search el-input__icon"
                    slot="prefix">
                </i>
            </el-input>
            <!-- <el-button size="small" type="primary" @click="searchHandler">搜索</el-button> -->

            <!-- 定点医院 -->
            <el-card class="box-card details" v-for="(item,index) in hospitals.list" :key="item.id">
                <div class="left">
                    <div class="head">
                        <div class="btn">{{index+1}}</div>
                        <div class="title">{{item.name}}</div>
                    </div>
                    <div class="flags">
                        <span>{{item.flags}}</span>
                    </div>
                    <div class="address">{{item.province}} {{item.city}} {{item.area}}</div>
                </div>
                <div class="right">
                    <div class="icon"><i class="el-icon-location"></i></div>
                    <div class="distance">111.km</div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 20
            }
        }
    },
    computed: {
        ...mapState("hospital",["hospitals"])
    },
    created() {
        // 查询所有医院
        this.queryHospitals(this.params)
    },
    watch: {
        // 搜索
        params: {
            handler:function() {
                this.queryHospitals(this.params)
            },
            deep: true
        }
    },
    methods: {
        ...mapActions("hospital",["queryHospitals"]),
        searchHandler() {

        }
    }
}
</script>

<style scoped>
    .el-input__inner {
        width: 20% !important;
        margin: 1rem 0;
    }
    .details {
        padding-bottom: 1em;
    }
    .distance {
        color: #9a9a9a;
    }
    .el-icon-location {
        font-size: 26px;
        color: #2674f6;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
        text-align: center;
    }
    .head::after {
        clear: both;
        content: '';
        display: block;
    }
    .head div{
        float: left;
    }
    .btn {
        background-color: #f4f4f4;
        border-radius: 50%;
        width: 1.3rem;
        line-height: 1.3rem;
        text-align: center;
    }
    .title {
        margin-left: .5rem;
        font-size: 18px;
    } 
    .flags {
        margin: .5em;
    }
    .flags span{
        background-color: #f4b24d;
        padding: .2rem .5rem;
        font-size: 14px;
        border-radius: 5px;
        color: #fff;
    }
    .address {
        color: #9a9a9a;
        font-size: 14px;
    }
    .box-card {
        /* width: 480px; */
        margin-top: 1rem;
    }
    .bj div {
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        padding: 1rem 0 0 1rem;
    }
    .bj div:first-child {
        padding-top: 1.5rem;
    }
    .bj {
        height: 150px;
        background-image: url('http://39.96.21.48/2020_znn/visual-ui/static/img/bg1.efce26ef.png');
        /* background-image: url('../../assets/imgs/定点医院bj.png'); */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
</style>


